import React, { useState, useCallback, useEffect } from 'react'
import { useHistory, useLocation } from 'react-router-dom'
import { getSofContractFindDetailContract } from '../Api'
import { ContractListDetailsAll } from './style'
import { PageHeader, Typography, message, Row, Col } from "antd";

const { Title } = Typography;

/**
 * @description: 合同列表
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-08-05） 生产信息数据渲染
 */

const ContractListDetails = () => {
    const history = useHistory()
    const location = useLocation()
    const { state } = location
    const [detailsData, setDetailsData] = useState({})
    const detailsFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSofContractFindDetailContract({ contractNo: state.conNo, contractId: state.id })
                if (code === '20000') {
                    setDetailsData(data)
                } else {
                    message.error(msg)
                }
            })()
        },
        [state],
    )
    useEffect(() => {
        detailsFun()
    }, [detailsFun])
    return <ContractListDetailsAll>
        <PageHeader
            className="site-page-header"
            title='合同详情'
            onBack={() => history.go('-1')}

        ></PageHeader>
        <Typography>
            <Title level={3}>基本信息</Title>
            {
                detailsData ? <Row>
                    <Col span={3}>合同编号:</Col>
                    <Col span={21}>{detailsData.conNo}</Col>
                    <Col span={3}>客户名称:</Col>
                    <Col span={21}>{detailsData.clientName}</Col>
                    <Col span={3}>经办人:</Col>
                    <Col span={21}>{detailsData.inputName}</Col>
                    <Col span={3}>销售人员:</Col>
                    <Col span={21}>{detailsData.sellName}</Col>
                    <Col span={3}>负责人:</Col>
                    <Col span={21}>{detailsData.mainName}</Col>
                    <Col span={3}>押金缴纳比例:</Col>
                    <Col span={21}>{detailsData.ptlStartDate}</Col>
                    <Col span={3}>合同文件:</Col>
                    <Col span={21}>{detailsData.ptlEndDate}</Col>
                    <Col span={3}>签订时间:</Col>
                    <Col span={21}>{detailsData.concludeDate}</Col>
                    <Col span={3}>结束时间:</Col>
                    <Col span={21}>{detailsData.ptlEndDate}</Col>
                    <Col span={3}>合同状态:</Col>
                    <Col span={21}>{detailsData.state}</Col>
                </Row> : null
            }
            <Title level={3}>产品信息</Title>
            {
                detailsData.pdPlan && detailsData.pdPlan.map((item, index) => <Row style={{ borderBottom: "1px solid #ccc" }} key={index}>
                    <Col span={3}>产品型号:</Col>
                    <Col span={21}>{item.product}</Col>
                    <Col span={3}>产品单价:</Col>
                    <Col span={21}>{item.price}</Col>
                    <Col span={3}>数量:</Col>
                    <Col span={21}> {item.amount}</Col>
                    <Col span={3}>预计完成时间:</Col>
                    <Col span={21}> {item.antEndDate}</Col>
                    <Col span={3}>预计生产时间:</Col>
                    <Col span={21}> {item.antStartDate}</Col>
                </Row>)
            }
            <Title level={3}>缴纳明细</Title>
            {
                detailsData.cps && detailsData.cps.map((item, index) => <Row style={{ borderBottom: "1px solid #ccc" }} key={index}>
                    <Col span={3}>产品:</Col>
                    <Col span={21}>{item.actDate}</Col>
                    <Col span={3}>缴纳性质:</Col>
                    <Col span={21}>{item.item}</Col>
                    <Col span={3}>缴纳金额:</Col>
                    <Col span={21}> {item.ribAccounts}</Col>
                    <Col span={3}>缴纳时间:</Col>
                    <Col span={21}> {item.enterDate}</Col>
                    <Col span={3}>是否到账:</Col>
                    <Col span={21}> {item.isArrival}</Col>
                    <Col span={3}>备注:</Col>
                    <Col span={21}> {item.actUserName}</Col>
                </Row>)
            }
            <Title level={3}>附件</Title>
            <Row key="6">
                {
                detailsData.file && detailsData.file.map(item => {
                    return <>
                        <Col span={2}></Col>
                        <Col span={22}>
                            <a href={item.path} download={item.fileName} target='_blank' rel="noreferrer" > {item.fileName} </a>
                        </Col>
                    </>
                })
            }
            </Row>

        </Typography>
    </ContractListDetailsAll>
}

export default ContractListDetails